<template>
    <div class="com_box pd_20">
        <div class="time_title head_title">筛选</div>
        <div class="flexbox">
            <div class="fx_left">达人信息</div>
            <div class="flexbox flexcenter fx_right flex">
                <div class="fx_box flexbox flexcenter">
                    <div class="fx_text">粉丝量级</div>
                    <div class="fx_line"></div>
                    <el-input v-model="queryInfo.fx_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.fx_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                </div>
                <div class="fx_box flexbox flexcenter">
                    <div class="fx_text">20-60s 价格</div>
                    <div class="fx_line"></div>
                    <el-input v-model="queryInfo.jg_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.jg_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                </div>
                <div class="fx_box flexbox flexcenter">
                    <div class="fx_text">60s+ 价格</div>
                    <div class="fx_line"></div>
                    <el-input v-model="queryInfo.jg2_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.jg2_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">w</span>
                </div>
            </div>
        </div>
        <div class="flexbox">
            <div class="fx_left">受众画像</div>
            <div class="flexbox flexcenter fx_right flex">
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="queryInfo.age" placeholder="年龄画像" @change="changeScreen" size="mini" style="width:90px">
                        <el-option v-for="item in ageList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="fx_line noMl"></div>
                    <el-input v-model="queryInfo.age_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.age_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                </div>
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="queryInfo.job" placeholder="八大画像" @change="changeScreen" size="mini" style="width:90px">
                        <el-option v-for="item in jobList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="fx_line noMl"></div>
                    <el-input v-model="queryInfo.job_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.job_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                </div>
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="queryInfo.sex" placeholder="粉丝性别" @change="changeScreen" size="mini" style="width:90px">
                        <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="fx_line noMl"></div>
                    <el-input v-model="queryInfo.sex_l" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                    <span class="fx_unit">~</span>
                    <el-input v-model="queryInfo.sex_r" @input="changeScreen" style="width:70px" placeholder="请输入" size="mini"></el-input>
                    <span class="fx_unit">%</span>
                </div>
            </div>
        </div>
        <div class="flexbox">
            <div class="fx_left">账号标签</div>
            <div class="flexbox flexcenter fx_right flex">
                <div class="fx_box flexbox flexcenter">
                    <el-select v-model="subForm.tags_relation" placeholder="账号标签" multiple collapse-tags @change="changeScreen" size="mini" style="width:300px">
                        <el-option v-for="item in tagList" :key="item.id" :label="item.tags" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <div class="flexbox" v-if="hasScreen.length>0">
            <div class="fx_left">已选</div>
            <div class="fx_check flex flexbox">
                <div class="check_item flexbox flexcenter" v-for="item in hasScreen" :key="item">
                    {{item.text}}
                    <el-link icon="el-icon-close" :underline="false" class="fx_close" @click="delectScreen(item)"></el-link>
                </div>
            </div>
        </div>
        <div class="fx_btn">
            <el-button plain size="small" class="el-button-width" @click="resetScreen">重置</el-button>
            <el-button type="primary" size="small" class="el-button-width" @click="selectScreen" @keyup.enter.native="selectScreen()">筛选</el-button>
        </div>
    </div>
</template>

<script>
export default {
    props: ["subForm"],
    name: "",
    data() {
        return {
            hasScreen: [],
            tagList: [],
            ageList: [],
            jobList: [],
            sexList: [],
            queryInfo: {
                fx_l: "",
                fx_r: "",
                jg_l: "",
                jg_r: "",
                jg2_l: "",
                jg2_r: "",
                age: "",
                age_l: "",
                age_r: "",
                job: "",
                job_l: "",
                job_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            },
            ageList: [
                {
                    id: "fans_age_18_23",
                    name: "18-23岁",
                },
                {
                    id: "fans_age_24_30",
                    name: "24-30岁",
                },
                {
                    id: "fans_age_31_40",
                    name: "31-40岁",
                },
                {
                    id: "fans_age_41_50",
                    name: "41-50岁",
                },
                {
                    id: "fans_age_50",
                    name: "大于50岁",
                },
            ],
            jobList: [
                {
                    id: "fans_crowd_jzmm",
                    name: "精致妈妈",
                },
                {
                    id: "fans_crowd_xzqn",
                    name: "小镇青年",
                },
                {
                    id: "fans_crowd_zsd",
                    name: "Z世代",
                },
                {
                    id: "fans_crowd_xrbl",
                    name: "新锐白领",
                },
                {
                    id: "fans_crowd_dsll",
                    name: "都市蓝领",
                },
                {
                    id: "fans_crowd_zszc",
                    name: "资深中产",
                },
                {
                    id: "fans_crowd_xzzln",
                    name: "小镇中老年",
                },
                {
                    id: "fans_crowd_dsyf",
                    name: "都市银发",
                },
            ],
            sexList: [
                {
                    id: "fans_sex_man",
                    name: "男",
                },
                {
                    id: "fans_sex_female",
                    name: "女",
                },
            ],
        };
    },
    created() {
        this.getTagList()
    },
    beforeDestroy() {},
    methods: {
        //获取标签
        async getTagList() {
            const { data: res } = await this.$http.post(
                "fxdata/sellibrary/tagList",
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.tagList = res.data
            }
        },

        getDataList() {
            this.$emit("getDataList");
        },
        changeScreen() {
            let hasChecked = [];
            if (this.subForm.tags_relation.length > 0) {
                let arr = {
                    type: "tag",
                    value: "",
                    text: this.tagName(this.subForm.tags_relation,this.tagList),
                };
                hasChecked.push(arr);
            }
            if (this.queryInfo.fx_l && this.queryInfo.fx_r) {
                let arr = {
                    type: "fans",
                    value: "",
                    text:
                        "粉丝量级：" +
                        this.queryInfo.fx_l +
                        "w~" +
                        this.queryInfo.fx_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.fans_num = [
                    Number(this.queryInfo.fx_l) * 10000,
                    Number(this.queryInfo.fx_r) * 10000,
                ];
            }
            if (this.queryInfo.jg_l && this.queryInfo.jg_r) {
                let arr = {
                    type: "price1",
                    value: "",
                    text:
                        "20-60s价格：" +
                        this.queryInfo.jg_l +
                        "w~" +
                        this.queryInfo.jg_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.price_20_60 = [
                    Number(this.queryInfo.jg_l) * 10000,
                    Number(this.queryInfo.jg_r) * 10000,
                ];
            }
            if (this.queryInfo.jg2_l && this.queryInfo.jg2_r) {
                let arr = {
                    type: "price2",
                    value: "",
                    text:
                        "60s+价格：" +
                        this.queryInfo.jg2_l +
                        "w~" +
                        this.queryInfo.jg2_r +
                        "w",
                };
                hasChecked.push(arr);
                this.subForm.price_60 = [
                    Number(this.queryInfo.jg2_l) * 10000,
                    Number(this.queryInfo.jg2_r) * 10000,
                ];
            }
            if (
                this.queryInfo.age &&
                this.queryInfo.age_l &&
                this.queryInfo.age_r
            ) {
                let arr = {
                    type: "age",
                    value: "",
                    text:
                        "年龄画像：" +
                        "(" +
                        this.getName(this.queryInfo.age, this.ageList) +
                        ") " +
                        this.queryInfo.age_l +
                        "%~" +
                        this.queryInfo.age_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.age.name = this.queryInfo.age;
                this.subForm.age.range = [
                    this.queryInfo.age_l,
                    this.queryInfo.age_r,
                ];
            }
            if (
                this.queryInfo.job &&
                this.queryInfo.job_l &&
                this.queryInfo.job_r
            ) {
                let arr = {
                    type: "job",
                    value: "",
                    text:
                        "八大画像：" +
                        "(" +
                        this.getName(this.queryInfo.job, this.jobList) +
                        ") " +
                        this.queryInfo.job_l +
                        "%~" +
                        this.queryInfo.job_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.crowd.name = this.queryInfo.job;
                this.subForm.crowd.range = [
                    this.queryInfo.job_l,
                    this.queryInfo.job_r,
                ];
            }
            if (
                this.queryInfo.sex &&
                this.queryInfo.sex_l &&
                this.queryInfo.sex_r
            ) {
                let arr = {
                    type: "sex",
                    value: "",
                    text:
                        "粉丝性别：" +
                        "(" +
                        this.getName(this.queryInfo.sex, this.sexList) +
                        ") " +
                        this.queryInfo.sex_l +
                        "%~" +
                        this.queryInfo.sex_r +
                        "%",
                };
                hasChecked.push(arr);
                this.subForm.sex.name = this.queryInfo.sex;
                this.subForm.sex.range = [
                    this.queryInfo.sex_l,
                    this.queryInfo.sex_r,
                ];
            }
            this.hasScreen = hasChecked;
        },
        // 账号标签
        tagName(tag,list) {
            let text = [];
            for(let i in list){
                for(let a in tag){
                    if(list[i].id==tag[a]){
                        text.push(list[i].tags)
                    }
                }
            }
            text = text.join("、");
            return "账号标签：" + text;
        },
        // 筛选标签
        getName(value, list) {
            let text = list
                .filter((val) => val.id == value)
                .map((item) => {
                    return item.name;
                })
                .toString();
            return text;
        },
        // 删除筛选
        delectScreen(item) {
            if (item.type == "tag") {
                this.subForm.tags_relation = [];
            }else if (item.type == "fans") {
                this.queryInfo.fx_l = "";
                this.queryInfo.fx_r = "";
                this.subForm.fans_num = [];
            } else if (item.type == "price1") {
                this.queryInfo.jg_l = "";
                this.queryInfo.jg_r = "";
                this.subForm.price_20_60 = [];
            } else if (item.type == "price2") {
                this.queryInfo.jg2_l = "";
                this.queryInfo.jg2_r = "";
                this.subForm.price_60 = [];
            } else if (item.type == "age") {
                this.queryInfo.age = null;
                this.queryInfo.age_l = "";
                this.queryInfo.age_r = "";
                this.subForm.age.name = "";
                this.subForm.age.range = [];
            } else if (item.type == "job") {
                this.queryInfo.job = null;
                this.queryInfo.job_l = "";
                this.queryInfo.job_r = "";
                this.subForm.crowd.name = "";
                this.subForm.crowd.range = [];
            } else if (item.type == "sex") {
                this.queryInfo.sex = null;
                this.queryInfo.sex_l = "";
                this.queryInfo.sex_r = "";
                this.subForm.sex.name = "";
                this.subForm.sex.range = [];
            }
            this.$nextTick(() => {
                this.changeScreen();
            });
        },

        // 筛选
        selectScreen() {
            this.changeScreen();
            this.subForm.page = 1;
            this.getDataList();
        },

        // 重置
        resetScreen() {
            this.queryInfo = {
                fx_l: "",
                fx_r: "",
                jg_l: "",
                jg_r: "",
                jg2_l: "",
                jg2_r: "",
                age: "",
                age_l: "",
                age_r: "",
                job: "",
                job_l: "",
                job_r: "",
                sex: "",
                sex_l: "",
                sex_r: "",
            };
            this.subForm.page = 1;
            this.subForm.field = "";
            this.subForm.order = "";
            this.subForm.blogger_name = "";
            this.subForm.tags_relation = [];
            this.subForm.fans_num = [];
            this.subForm.price_20_60 = [];
            this.subForm.price_60 = [];
            this.subForm.age.name = "";
            this.subForm.age.range = [];
            this.subForm.crowd.name = "";
            this.subForm.crowd.range = [];
            this.subForm.sex.name = "";
            this.subForm.sex.range = [];
            this.subForm.p_type = 0;
            this.hasScreen = [];
            this.getDataList();
        },
    },
    components: {},
};
</script>


<style scoped>
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
}

.fx_left {
    width: 100px;
    font-size: 14px;
    color: #17233d;
    line-height: 36px;
    height: 36px;
    margin-top: 12px;
}
.fx_right {
    flex-wrap: wrap;
}
.fx_box {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    margin-right: 12px;
    height: 32px;
    padding: 0px 16px;
    margin-top: 12px;
}
.fx_text {
    font-size: 14px;
    color: #616c85;
}
.fx_line {
    height: 12px;
    border-left: 1px solid #ebebeb;
    margin-left: 8px;
    margin-right: 0;
}
.noMl {
    margin-left: 0;
}
.fx_unit {
    font-size: 14px;
    color: #17233d;
    margin: 0 4px;
}
.fx_check {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding-top: 12px;
    padding-left: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.check_item {
    padding-left: 8px;
    margin-bottom: 12px;
    margin-right: 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 2px;
    height: 32px;
    font-size: 13px;
    color: #616c85;
}
.fx_close {
    font-size: 13px;
    width: 32px;
}
.fx_btn {
    margin-top: 12px;
    margin-left: 100px;
}
/deep/ .fx_box .el-input__inner {
    border: 0;
    padding-left: 8px;
    font-size: 14px;
}
/deep/ .fx_box .el-select .el-input__inner::-webkit-input-placeholder,
/deep/ .fx_box .el-cascader .el-input__inner::-webkit-input-placeholder {
    color: #616c85;
}
/deep/ .fx_box .el-select .el-input__inner {
    padding-left: 0;
}
/deep/ .fx_box .el-cascader__tags .el-tag {
    max-width: 120px;
}
</style>



